<template>
    <div class="heasers">
        <el-container>
            <el-main>
                <div class="main-div">
                    <!-- 分类样式模板  插槽 -->
                    <div class="main-title">

                            <div slot="fen" >
                                <div class="fenlei"
                                     v-for="(item, index) in arr":key="index"
                                     @click="toggle(index)":class="{ active: index == bol }"
                                >
                                    <router-link :to="item.path"><span class="bb">{{ item.title }}</span></router-link>
                                </div>
                            </div>

                    </div>
                </div>
            </el-main>
        </el-container>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {

        data() {
            return {
                arr: [
                    { title: "首页", path: "/home" },
                    { title: "体育", path: "/sports" },
                    { title: "舞蹈", path: "/dance" },
                    { title: "亲子", path: "/parenthood" },
                    { title: "搖滾", path: "/song" },
                    { title: "戏剧", path: "/opera" },
                ],

                bol: 1,
            };
        },
        methods: {
            toggle(index) {
                this.bol = index;
            },
        },
    }
</script>

<style scoped>
    *{
        text-decoration: none;
    }
 .fenlei{
     float: left;
     width: 15%;
     text-align: center;
 }
 /*.bb:hover{*/
 /*    height: 40px;*/
 /*    width: 90px;*/
 /*    background-color: red;*/
 /*    color: whitesmoke;*/
 /*}*/
</style>